<template>
    <div>
        <el-container>
            <el-header style="background-color: #4c535a;">
                <img src="@/assets/xh.jpg" alt="" style="width: 40px;position: relative;top: 10px;">
                <span style="font-size: 20px; margin-left: 15px; color: white;">学生宿舍管理系统</span>
            </el-header>
        </el-container>

        <el-container>
            <el-aside style="overflow: hidden;min-height: 100vh;background-color: #545c64;width: 250px;">
                <el-menu default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="/home">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">系统首页</span>
                    </el-menu-item>
                    <el-menu-item index="/admin">
                        <i class="el-icon-menu"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item> 
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>信息管理</span>
                        </template>

                        <el-menu-item-group>
                            <el-menu-item index="/student">学生信息</el-menu-item>
                            <el-menu-item index="/lifeplace">宿舍信息</el-menu-item>
                            <el-menu-item index="/wscheck">卫生检查信息</el-menu-item>
                            <el-menu-item index="/waterdian">水电缴费信息</el-menu-item>
                            <el-menu-item index="/repair">宿舍公物报修信息</el-menu-item>
                            <el-menu-item index="/visit">来访登记信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "Layout"
}
</script>

<style scoped>
.el-menu {
    border-right: none !important;
}
</style>